<template>
    <div class="riLayout">
        <div class="tagsBox">
            <div>
                <span class="title">客房类型</span>
                <el-select v-model="tagsValue.roomType" class="m-2" placeholder="Select" size="large">
                    <el-option v-for="item in kinds" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </div>
            <div>
                <span class="title">价格区间</span>
                <el-select v-model="tagsValue.price" >
                    <el-option v-for="item in priceList" :key="item.value"  :label="item.title" :value="item.value" />
                </el-select>
            </div>

            <div>
                <span class="title">数量区间</span>
                <el-select v-model="tagsValue.num" >
                    <el-option v-for="item in numList" :key="item.value"  :label="item.title" :value="item.value" />
                </el-select>
            </div>

            <div class="btn">
                <el-button type="primary" style="width:100%" @click="queryInfo">查询</el-button>
                <el-button type="primary" style="width:100%" @click="clear">清空查询</el-button>
            </div>

        </div>
        <el-card style="width:100%">
            <el-table
                ref="multipleTableRef"
                :data="tableData"
                border 
                style="width: 100%;border: none; border-radius: 8px"
                v-loading="loading" 
                element-loading-text="loading..." 
                element-loading-background="white"
            >
                <el-table-column type="index"/>
                <el-table-column property="name" label="图片" width="250">
                    <template #default="scope">
                        <div class="imgBox">
                            <img v-for="(item,index) in scope.row.room_image" :key="item" :style="{ '--i':index }" :src="'/api/room/getImage/' + item"/>
                            <span>{{ scope.row.room_image?.length }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column property="room_name" label="类型" />
                <el-table-column property="price" label="价格" />
                <el-table-column property="num" label="数量" />
                <el-table-column property="description" label="描述" />
                <el-table-column label="操作" width="200px">
                    <template #default="scope">
                        <el-button @click="detailInfo(scope.row)">详细信息</el-button>
                        <el-button @click="deleteInfo(scope.row)" type="danger">删除</el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="无数据" />
                </template>
            </el-table>
        </el-card>

        <el-card class="pagination" body-style="padding:0">
            <el-config-provider :locale="zhCn">
                <el-pagination  :page-size="5"
                                layout="prev, pager, next, jumper" 
                                background
                                @current-change="changePage"
                                :total="total"
                                prev-text="上一页"
                                next-text="下一页"
                                />
            </el-config-provider>
        </el-card>
    </div> 
</template>

<script lang="ts" setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { reactive, ref, onBeforeMount } from 'vue'
import { get } from '@/http/axios'
import { getCookies } from '@/utils/cookies'
import { useUserInfoStore } from '@/store/userInfoState'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

const tagsValue = reactive({
    roomType:null,
    price:null,
    num:null
})
type kindType ={
    id:number
    name:string
}
type roomInfoType ={
    id: number
    name_id: number
    num: number
    price: number
    room_code: string
    room_device: string
    room_image: Array<string>
    room_name: string
}
let kinds = ref<Array<kindType>>()
const store = useUserInfoStore()
let loading = ref<boolean>(true)
const router = useRouter()
let total = ref<number>(0)
const tableData = ref()
const id = ref<number>()
let priceList = reactive<Array<any>>([
    { title: '0-99', value: 0 },
    { title: '100-199', value: 1 },
    { title: '200-299', value: 2 },
    { title: '300-399', value: 3 },
    { title: '400-499', value: 4 },
    { title: '500-599', value: 5 },
    { title: '600以上', value: 6 },
])
let numList = reactive<Array<any>>([
    { title: '0-9', value: 0 },
    { title: '10-19', value: 1 },
    { title: '20-29', value: 2 },
    { title: '30-39', value: 3 },
    { title: '40-49', value: 4 },
    { title: '50间以上', value: 5 },
])

onBeforeMount(() => {
    id.value = store.user?.id?store.user.id:getCookies('id')
    getRoomKinds()
    initData()
})
function initData(page: number = 1) {
    tableData.value = []
    get('/room/queryPage',{
        hotel_id: id.value,
        num: tagsValue.num,
        price: tagsValue.price,
        name_id: tagsValue.roomType,
        pageNum: page,
        pageSize: 5
    }).then(res => {
        total.value = res.result.totalCount
        let timer = setTimeout(() => {
            clearTimeout(timer)
            loading.value = false
            return handledata(res.result.content)
        },500)
    }).catch(err => {
        ElMessage.error('加载房间信息出错，请刷新重试')
    })
}
function handledata(arr: Array<{ room: roomInfoType }>) {
    const arr1 = [] as Array<roomInfoType>
    arr.forEach(el => {
        el.room.room_image =  el.room.room_image?.split(',')
        arr1.push(el.room)
    })
    tableData.value = arr1
}
function getRoomKinds(){
    get('/roomName/queryAll').then(res => {
        kinds.value = res.result
    })
}
function detailInfo(obj){
    router.push({ path:'/main/updateRoom/', query:{ 
        roomId: obj.id,
        hotel_id: obj.hotel_id,
    }})
}
function queryInfo(){
    loading.value = true
    initData()
}
function changePage(val:number){
    loading.value = true
    initData(val)
}
function clear(){
    Object.keys(tagsValue).forEach(el => {
        tagsValue[el] = null
    })
}
function deleteInfo(obj) {
    ElMessageBox.confirm(
    '您确定删除这条数据吗？','提醒',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    }).then(() => {
        get('/room/deleteRoom?id=' + obj.id).then(res => {
            if (res.result) {
                loading.value = true
                ElMessage.success('删除成功')
                initData()
            }
        }).catch(err => {
            ElMessage.error('删除失败')
        })
    }).catch(() => {
      ElMessage.warning('删除取消')
    })
}
</script>

<style lang="scss" scoped>
@import url(../../assets/css/infoKinds.scss);
@import url(../../assets/css/changePagintoin.scss);
.riLayout{
    width: 100%;
    @include flexColumnCenter;
    gap: 2px;
    @include allBack;
}
.paginationBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border-radius: 8px;
}
.imgBox{
    height: 130px;
    position: relative;
    @include flexRowCenter;
    & img{
        width: 70%;
        height: 70%;
        left: calc(10px * var(--i));
        bottom: calc(10px * var(--i));
        position: absolute;
        border-radius: 4px;
        z-index:  calc(100 - var(--i));
    }
    & img:hover{
        z-index: 199;
    }
    & span:last-child{
        background: rgb(0, 0, 0,0.3);
        padding: 10px 20px;
        border-radius: 4px;
        position: absolute;
        font-size: 25px;
        color: white;
        z-index: 100;
        bottom: 0;
        left: 0;
    }
}
.btn{
    width: 350px !important;
}

</style>